<template>
    <el-container class="source-container" direction="vertical">
        <el-container>
            <JobFilterBtnGroup ref="btnGroup" @handleClick="handleHeaderClick" :config="headerConfig"
                :specific="specific" :whereDict="whereDict">
            </JobFilterBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table ref="sourceTable" :data="targets" v-loading="loadingShow"
                    @selection-change="handleSelectionChange">
                    <el-table-column fixed label="序号" type="selection" prop="id"></el-table-column>
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column v-if="ibatch == 1" label="页数" prop="maxRow" width="60px"></el-table-column>
                    <el-table-column v-if="ibatch == 1" label="数量" prop="count" width="60px"></el-table-column>
                    <el-table-column label="登录" prop="login" width="60px">
                        <template slot-scope="scope">
                            <span>{{ scope.row.login ? "要" : "不" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="平台名称" prop="platform">
                        <template slot-scope="scope">
                            <span>{{ platformFilter(scope.row.platform) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="链接" prop="link" width="350px"></el-table-column>
                    <el-table-column label="状态" prop="status">
                        <template slot-scope="scope">
                            <span>{{ showStatusDesc(scope.row.status) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="生效/失效" prop="enable">
                        <template slot-scope="scope">
                            <span>{{ scope.row.enable ? "生效" : "失效" }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
    </el-container>
</template>

<style lang="scss">
.source-container {

    .radio-container {
        margin-left: 0px;

        .direction-hor {
            display: inline-block;
            width: 100px;
            margin-bottom: 0px !important;

            .el-form-item__label {
                margin-left: 20px;
                width: auto;
            }

            .el-form-item__content {
                width: auto;
            }
        }
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }

    li {
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
}
</style>

<script>
import { DictDao } from "@/dao/dictDao"
import { SourceDao } from "@/dao/sourceDao"
import { JobFilterBtnMixin } from "@/mixins/JobFilterBtnMixin"
import JobFilterBtnGroup from "@/components/Common/JobFilterBtnGroup"
import { ArticleStatus, DictType, UsageScope } from "@/entities/Constant"

export default {
    name: "SpiderJobSource",
    mixins: [JobFilterBtnMixin],
    props: {
        batch: {
            type: Number,
            default: -1,
        },
        jobSource: {
            type: String,
            default: "{}"
        }
    },
    components: {
        JobFilterBtnGroup,
    },
    data() {
        return {
            ibatch: this.batch,
            targets: [],
            platforms: [],
            loadingShow: true,
            formLableWidth: "60px",
            form: SourceDao.initialForm(this.ibatch),
            rules: {
                name: [{
                    required: true,
                    message: "",
                    trigger: "blur",
                }]
            },
            specific: {
                is: false,
                ids: [],
            },
            whereDict: { "status": [0], "enable": [1] },
            headerConfig: {
                add: false,
                refresh: false,
                pageSize: 5,
                statusBtns: [
                    { status: 1, name: "列表", key: "batch" },
                    { status: 0, name: "详情", key: "batch" },
                    { status: 0, name: "待采集", key: "status" },
                    { status: 1, name: "已采集", key: "status" },
                    { status: 1, name: "生效", key: "enable" },
                    { status: 0, name: "失效", key: "enable" },
                ]
            },
        }
    },
    mounted() {
        this.getWhereDict()
        DictDao.Platforms(DictType.Spider, UsageScope.Spider).then((res) => {
            this.platforms = res
            this.getTargets(this.page)
        })
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            SourceDao.fetchCount(this.whereDict, page, this.headerConfig.pageSize).then((res) => {
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
                this.handleSpecificIdsSelected()
            })
        },
        platformFilter(value) {
            let obj = this.platforms.find(obj => obj.id == value)
            return obj ? obj.name : ""
        },
        handleDialogClose() {
            this.form = SourceDao.initialForm(this.ibatch)
        },
        handleStatusFilter(row) {
            if (this.whereDict["batch"].indexOf(1) != -1) {
                this.ibatch = 1
            }
            this.getTargets(this.page)
        },
        handleSpecificIdsSelected() {
            let tableDatas = []
            for (let target of this.targets) {
                if (this.specific.ids.includes(target.id)) {
                    tableDatas.push(target)
                }
            }
            this.$nextTick(() => {
                tableDatas.forEach(row => {
                    this.$refs.sourceTable.toggleRowSelection(row, true);
                });
            })
        },
        getWhereDict() {
            if (this.jobSource.length > 2) {
                let source = JSON.parse(this.jobSource)
                this.specific = source.specific
                this.whereDict = source.whereDict
            } else {
                this.whereDict = this.handleInitialWhere()
            }
        },
        clearTableSelection() {
            this.$refs["sourceTable"].clearSelection()
        },
        showStatusDesc(status) {
            let obj = ArticleStatus.Options().find(obj => obj.id == status)
            return obj ? obj.name : ""
        }
    },
}
</script>
